<script lang="ts" setup>
	import { ref, reactive, inject, toRefs } from "vue";
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		getCurrentInstance
	} from 'vue'
	import {
		userStore
	} from '@/pinia';
	import {
		useRouter
	} from 'uni-mini-router';
	const {
		proxy,
	} = getCurrentInstance()
	const userStoreInfo = userStore();
	let router = useRouter()
	const routerLink = (e) => {
		router.push({
			name: 'tuikuanControls',
			params: {
				data: e,
				id: orderId.value
			}
		})
	}
	let orderId = ref()
	let orderDetail = ref(null)
	onLoad((option) => {
		console.log(option.id);
		orderId.value = option.id
	})
	onShow(() => {
		getDetail()
	})
	const getDetail = () => {
		//获取详情
		proxy.$req('GET', proxy.$api.gysOrderDetail, {
			id: orderId.value,
		}).then((res) => {
			console.log(res);
			orderDetail.value = res.result
		})
	}
	const copy = (e) => {
		uni.setClipboardData({
			data: e,
			success: function () {
				uni.$u.toast('复制成功')
			}
		});
	}
	const wanshi = () => {
		proxy.$req('POST', proxy.$api.shouhouWan, {
			orderId: orderId.value,
		}).then((res) => {
			console.log(res);
			if (res.success) {
				getDetail()
			}
			uni.$u.toast(res.message)
		})
	}
</script>
<template>
	<view class="allContainer" v-if="orderDetail!=null">
		<view class="huanTit">
			<!-- 请处理退款申请 -->
			<text v-if="orderDetail.status==1">等待买家付款</text>
			<text v-if="orderDetail.status==2">买家已付款</text>
			<text v-if="orderDetail.status==3">卖家已发货</text>
			<text v-if="orderDetail.status==4">买家已收货</text>
			<text v-if="orderDetail.status==5">已评价</text>
			<text v-if="orderDetail.status==-2">订单已关闭</text>

			<text v-if="orderDetail.status==-1&&orderDetail.refundStatus==1">申请中</text>
			<text v-if="orderDetail.status==-1&&orderDetail.refundStatus==2">已同意</text>
			<text v-if="orderDetail.status==-1&&orderDetail.refundStatus==3">已寄回</text>
			<text v-if="orderDetail.status==-1&&orderDetail.refundStatus==4">已退款</text>
			<text v-if="orderDetail.status==-1&&orderDetail.refundStatus==5">退款失败</text>
			<text v-if="orderDetail.status==-1&&orderDetail.refundStatus==-1">取消售后</text>
			<text v-if="orderDetail.status==-1&&orderDetail.refundStatus==-2">已拒绝申请</text>


		</view>
		<view class="consumerInfo">
			<view class="cTit">退款信息</view>
			<view class="consumerCon r-flex-between-start">
				<text>买家昵称</text>
				<text>{{ orderDetail.realName }}</text>
			</view>
			<view class="consumerCon r-flex-between-start">
				<text>退款原因</text>
				<text>{{ orderDetail.orderInfoList[0].refund.refundReasonWap }}</text>
			</view>
			<view class="consumerCon r-flex-between-start">
				<text>申请说明</text>
				<text>{{ orderDetail.orderInfoList[0].refund.refundReasonRemark }}</text>
			</view>
			<view class="cImg r-flex-end-center" v-if="orderDetail.refundReasonWapImg">
				<image v-for="item in JSON.parse(orderDetail.refundReasonWapImg)" :src="item" mode=""></image>
			</view>
		</view>
		<view class="btmBox">
			<view class="goodsInfo">
				<block v-if="orderDetail.orderInfoList!=null">
					<view class="gcGoods r-flex-start-start" v-for="(item,index) in orderDetail.orderInfoList"
						:key="index">
						<image :src="item.sku!=null?item.sku.logo:''" mode=""></image>
						<view class="gcgCon c-flex-start-start">
							<text class="u-line-1"
								style="font-weight: 600;margin-bottom: 10rpx;">{{ item.productName }}</text>
							<view class="r-flex-between-center xxx">
								<text>颜色分类：{{ item.sku!=null?item.sku.specIdsName:'' }}</text>
								<text>￥{{ item.price }}</text>
							</view>
							<view class="r-flex-between-center xxx">
								<text>{{ item.startTime }}-{{ item.endTime }}
									<!-- (共3天) -->
								</text>
								<text>×{{ item.cartNum }}</text>
							</view>
						</view>
					</view>
				</block>
				<view class="itemForm r-flex-between-start">
					<text>退款原因</text>
					<text style="color: #606266;">{{ orderDetail.orderInfoList[0].refund.refundReasonWap }}</text>
				</view>
				<view class="itemForm r-flex-between-start">
					<text>退款类型</text>
					<text
						style="color: #606266;">{{ orderDetail.orderInfoList[0].refund.refundType==0?'仅退款':'退货退款' }}</text>
				</view>
				<view class="itemForm r-flex-between-start">
					<text>退还金额</text>
					<text style="color: #606266;">￥{{ orderDetail.orderInfoList[0].refund.refundPrice }}</text>
				</view>
				<view class="itemForm r-flex-between-start">
					<text>申请件数</text>
					<text style="color: #606266;"
						v-if="orderDetail.orderInfoList">{{ orderDetail.orderInfoList.length }}</text>
				</view>
				<view class="itemForm r-flex-between-start">
					<text>申请时间</text>
					<text style="color: #606266;">{{ orderDetail.orderInfoList[0].refund.refundTime }}</text>
				</view>
				<view class="itemForm r-flex-between-start">
					<text>退款编号</text>
					<text style="color: #606266;">{{ orderDetail.tradeNo }}</text>
				</view>
				<view class="itemForm r-flex-between-start" v-if="orderDetail.orderInfoList[0].refund.refundExpress">
					<text>物流单号</text>
					<view class="r-flex-center-center">
						<text style="color: #606266;">{{ orderDetail.orderInfoList[0].refund.refundExpress }}</text>
						<view class="" @click="copy(orderDetail.orderInfoList[0].refund.refundExpress)">
							<u-icon name="file-text"></u-icon>
						</view>
					</view>
				</view>
				<view class="itemForm r-flex-between-start"
					v-if="orderDetail.orderInfoList[0].refund.refundExpressName">
					<text>物流公司</text>
					<text style="color: #606266;">{{ orderDetail.orderInfoList[0].refund.refundExpressName }}</text>
				</view>
			</view>
		</view>
		<view class="btnContainer r-flex-around-center" v-if="orderDetail.status==-1">
			<!-- v-if="orderDetail.refundStatus==1" -->
			<view class="bSon" @click="routerLink('no')" v-if="orderDetail.refundStatus==1">
				拒绝退款申请
			</view>
			<!-- v-if="orderDetail.refundStatus==1" -->
			<view class="bSon" @click="routerLink('yes')" v-if="orderDetail.refundStatus==1">
				同意退款
			</view>
			<view class="bSon" v-if="orderDetail.refundStatus==3" @click="wanshi()">
				确认退款给买家
			</view>
		</view>

	</view>
</template>
<style lang="scss">
	page {
		background-color: #fafafa;
	}

	view {
		box-sizing: border-box;
	}

	.allContainer {
		padding: 16rpx 32rpx;
		padding-bottom: 200rpx;
	}

	.huanTit {
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding: 32rpx;
		font-weight: 600;
		font-size: 30rpx;
		margin-bottom: 16rpx;
	}

	.consumerInfo {
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding: 32rpx;
		margin-bottom: 16rpx;

		.cTit {
			font-size: 30rpx;
			font-weight: 600;
			margin-bottom: 16rpx;
		}

		.consumerCon {
			margin: 10rpx 0;

			text {
				display: inline-block;
				margin: 6rpx 0;
			}

			text:nth-child(1) {
				width: 130rpx;
				font-size: 26rpx;
			}

			text:nth-child(2) {
				text-align: right;
				width: 460rpx;
				font-size: 26rpx;
			}
		}

		.cImg {

			image {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
			}
		}
	}

	.btmBox {
		.goodsInfo {
			background: #FFFFFF;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 24rpx;
			border: 2rpx solid #FFFFFF;
			padding: 32rpx;
			margin-bottom: 16rpx;

			.gcGoods {
				margin-bottom: 32rpx;

				image {
					width: 140rpx;
					height: 140rpx;
					margin-right: 16rpx;
				}

				.gcgCon {
					width: 450rpx;

					.xxx {
						width: 100%;
						font-size: 26rpx;
						color: #606266;
						margin: 6rpx 0;
					}

					// text:nth-child(2) {
					// 	font-size: 28rpx;
					// 	margin: 16rpx 0;
					// }

					// text:nth-child(3) {
					// 	font-size: 28rpx;
					// }
				}
			}

			.itemForm {
				font-size: 26rpx;
				margin: 16rpx 0;
			}
		}
	}

	.btnContainer {
		margin-top: 66rpx;

		.bSon {
			width: 220rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			background-color: #CB645E;
			border-radius: 80rpx;
		}
	}
</style>